define(function(require, exports, module) {

  var Backbone = require('backbone');
  var $ = require('jquery');
  var _ = require('underscore');
  var jsonview = require('jsonview');

  var crosshair = require('hy5b/frontend/crosshair/index');
  var graph = require('js/graph/graph')
  var littleCanvas = require('hy5b/frontend/canvas/littleCanvas')

  function main() {
    var $app = $('<div id="app">');
    $('#main').html($app);
    app($app)
    // crosshair()
  }

  function app($app) {
    var w = 800;
    var h = 600;
    $app.append($('<canvas id="canvas">').attr('width', w).attr('height', h));

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var docH = document.documentElement.clientHeight;
    var docW = document.documentElement.clientWidth;
    var devicePixelRatio = window.devicePixelRatio;

    ctx.clearRect(0, 0, w, h);

    // test(ctx, 400, 300);
    // test(ctx, 400, 600);
    // drawRadialGradient(ctx, w, h)
    pathExercise(ctx)

    var textureCanvas = graph.brightPointCanvas('#ff0000');
    var lc = new littleCanvas().setSize(32);
    lc.draw(function(ctx) {
      ctx.rect(0.5,0.5, this.size-1, this.size-1)
      ctx.moveTo(0,0)
      ctx.lineTo(this.size, this.size)
      ctx.moveTo(this.size, 0)
      ctx.lineTo(0, this.size)
      ctx.lineWidth = 1
      ctx.strokeStyle = '#ccc'
      ctx.stroke()
    })
    $app.append($("<div>").addClass('bg-blue').append(textureCanvas).append(lc.pop()));
  }

  function pathExercise(ctx) {
    ctx.beginPath();
    ctx.rect(10, 10, 100, 100)
    ctx.stroke();
    ctx.beginPath();
    ctx.rect(50, 50, 100, 100);
    ctx.stroke();

  }

  function drawLinearGradient(ctx) {
    var gradient = ctx.createLinearGradient(0, 0, 100, 100)

    gradient.addColorStop(0, 'green')
    gradient.addColorStop(1, 'red')
    ctx.save()

    ctx.fillStyle = gradient
    ctx.fillRect(0,0,100,100)


    ctx.restore()
  }


  function drawRadialGradient(ctx, w, h) {
    var gradient = ctx.createRadialGradient(100, 100, 100, 100, 100, 0);
    gradient.addColorStop(0, 'green')
    gradient.addColorStop(1, 'red')

    ctx.save()

    ctx.fillStyle = gradient
    ctx.fillRect(0,0,200,200)


    ctx.restore()
  }

  function test(ctx, w, h, ratio) {
    ratio = ratio || 1;
    ctx.setTransform(1,0,0,1,0,0);

    ctx.save();
    ctx.beginPath();
    ctx.moveTo(0, h);
    ctx.lineTo(w / 4, 0);
    ctx.lineTo(w / 2, h);
    ctx.lineTo(w / 4 * 3, 0);
    ctx.lineTo(w, h);
    // ctx.closePath();
    ctx.lineWidth = 10;
    ctx.lineJoin = 'miter'
    var gradient = ctx.createLinearGradient(0,0,w,h)
    gradient.addColorStop(0, 'green');
    gradient.addColorStop(1, 'red');

    ctx.strokeStyle = gradient
    // ctx.strokeStyle = 'rgba(123,23,4,0.4)'
    // ctx.lineCap = 'square';
    ctx.stroke();
    ctx.restore();
  }

  return main;
})
